<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="重置密码" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="itemBox">
			<text class="title">手机号</text>
			<input class="telInput" type="tel" maxlength="11" placeholder="请输入您的手机号"/>
		</view>
		<view class="itemBox">
			<text class="title">验证码</text>
			<input class="codeInput" type="number" maxlength="6" placeholder="请输入6位验证码"/>
			<button class="getCode">获取验证码</button>
		</view>
		<view class="itemBox">
			<text class="title">新密码</text>
			<input class="passwordInput" type="text" :password="true" placeholder="请输入您的新密码"/>
		</view>
		<view class="itemBox">
			<text class="title">确认密码</text>
			<input class="confirmPasswordInput" type="text" :password="true" placeholder="请确认您的信密码"/>
		</view>
		<button class="confirm">确认重置</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:0,
			}
		},
		onLoad(options) {
			this.type = options.type;
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox{
		width: 100%;
		height: 90rpx;
		float: left;
		background-color: #fff;
		border-bottom: 1rpx solid #f8f8f8;
		display: flex;
		align-items: center;
		.title{
			width: auto;
			float: left;
			margin-left: 5%;
			height: 100%;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
		.telInput,.codeInput,.passwordInput{
			flex: 1;
			margin-right: 5%;
			margin-left: 60rpx;
			float: left;
			color:  #454545;
		}
		.confirmPasswordInput{
			flex: 1;
			margin-right: 5%;
			margin-left: 30rpx;
			color:  #454545;
		}
		.telInput:placeholder{
			color: #8a8a8a;
		}
		.getCode{
			width: auto;
			height: 90rpx;
			float: right;
			margin-right: 5%;
			line-height: 90rpx;
			background-color: #fff;
			text-align: center;
			font-size: 26rpx;
			color: #f9c234;
		}
		.getCode::after{
			border:none;
		}
	}
	.itemBox:nth-child(2){
		margin-top: 30rpx;
	}
	.itemBox:last-child{
		border-bottom-width: 0rpx;
	}
	.confirm{
		width: 90%;
		float: left;
		margin-left: 5%;
		margin-top: 45rpx;
		height: 90rpx;
		background-color: #f9c234;
		color: #fff;
		line-height: 90rpx;
		font-weight: bold;
	}
	.confirm::after{
		border:none;
	}
</style>